<template>
  <BotFixedBar>
    <view class="tab-bar">
      <view
        class="tab-item"
        v-for="(item, index) in tabList"
        :key="index"
        :class="active == item.name ? 'a-item' : ''"
        @click="handleChange(item)"
      >
        <wd-icon :name="item.icon" size="18px" />
        <text class="tab-name"> {{ item.title }} </text>
      </view>
    </view>
  </BotFixedBar>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import BotFixedBar from "./BotFixedBar.vue";
const props = defineProps({
  active: {
    type: String,
    default: "index",
  },
});
const tabList = [
  {
    name: "index",
    icon: "home",
    title: "首页",
  },
  {
    name: "garden",
    icon: "chart-bubble",
    title: "动态",
  },
  {
    name: "cart",
    icon: "cart",
    title: "购物车",
  },
  {
    name: "mine",
    icon: "chat",
    title: "我的",
  },
];
const handleChange = ({ name }) => {
  uni.switchTab({
    url: `/pages/${name}/${name}`,
  });
};
onLoad(() => {
  uni.hideTabBar({
    animation: false,
  });
});
</script>

<style lang="scss" scoped>
.tab-bar {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  .tab-item {
    flex: 1;
    gap: 2px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .tab-name {
      font-size: 14px;
    }
  }
  .a-item {
    color: #f40;
  }
}
</style>
